import React, { useState, useEffect, useRef } from "react";
import { Popconfirm, Button, message } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import { PlusOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import ProForm, { ModalForm,ProFormRadio,ProFormDependency,ProFormTextArea  } from "@ant-design/pro-form";
import { history, useLocation } from "umi";
import moment from "moment";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList } from "@/api/readRecord";

export default () => {
  const columns = [
    {
      title: "申请时间",
      dataIndex: "address",
      search: false,
    },
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "手机号",
      dataIndex: "mobile",
    },

    {
      title: "是否达标",
      dataIndex: "type",
      search: false,
      render: (_, record) => {
        return record.type === 1 ? "是" : "否";
      },
    },
  ];

  const formRef = useRef();
  const renderAuditFormModal = (record, actionRef) => {
    const handleAddOrUpdate = async (fields) => {
      const postData = {
        ...fields,
      };
      const res = await refund(postData);
      if (res.data) {
        message.success("审核成功");
        actionRef?.current.reload();
        return true; // 关闭弹框
      }
    };

    return (
      <ModalForm
        key="audit"
        labelCol={{
          span: 4,
        }}
        formRef={formRef}
        layout="horizontal"
        title="审核"
        width={600}
        trigger={
          <Button style={{ marginRight: 10 }} type="primary">
            审核
          </Button>
        }
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
        }}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
        initialValues={{
          ...record,
        }}
      >
        <ProFormRadio.Group
          label="是否通过"
          name="pass"
          options={[
            {
              value: 1,
              label: "通过",
            },
            {
              value: 2,
              label: "驳回",
            },
          ]}
        />
        <ProFormDependency name={["pass"]}>
          {({ pass }) => {
            return (
              pass === 2 && (
                <ProFormTextArea
                  fieldProps={{
                    rows: 5,
                  }}
                  name="reason"
                  label="原因"
                  placeholder="请输入驳回原因"
                  rules={[
                    {
                      required: true,
                      message: "请输入驳回原因",
                    },
                  ]}
                />
              )
            );
          }}
        </ProFormDependency>
      </ModalForm>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        columns,
        modalWidth: 700,
        fetchList,
        renderEdit: (record, actionRef) => {
          return renderAuditFormModal(record, actionRef);
        },
        renderAdd: () => {},
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
